<template>
  <div>
    <div style="position:fixed;left:30px;bottom:20px;">
      <el-badge :value="responses.length" class="item">
        <el-button @click="drawer = true" plain size="small">RESPONSE</el-button>
      </el-badge>
    </div>
    <el-drawer title="AXIOS RESPONSE DATA" :visible.sync="drawer" direction="rtl" size="50%">
      <div style="padding:0 20px;overflow=auto">
        <span v-if="!responses||responses.length===0">NO DATA</span>
        <div v-if="responses&&responses.length>0">
          <span>DATA INDEX: {{responseIndex}}</span>
          <el-slider v-model="responseIndex" :max="responses.length-1" :show-tooltip="false" show-stops></el-slider>
          <div v-if="!isObject" v-html="lastResponse"></div>
          <pre v-if="isObject">{{lastResponse}}</pre>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return { drawer: false, responseIndex: 0 };
  },
  computed: {
    responses() {
      return this.$store.state.dev.responses;
    },
    lastResponse() {
      return this.responses[this.responses.length - 1];
    },
    currentResponse() {
      return this.responses[this.value2];
    },
    isJson() {
      let str = this.lastResponse;
      try {
        if (typeof JSON.parse(str) == "object") {
          return true;
        }
      } catch (e) {
        console.log(e);
      }
      return false;
    },
    isObject() {
      let str = this.lastResponse;
      if (typeof str == "object") {
        return true;
      }
      return false;
    }
  }
};
</script>